<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>响应式布局</title>
	<style type="text/css">
	/*响应式布局就是使用媒体查询的方式，通过查询浏览器宽度，不同的宽度应用不同的样式块*/
		body{
			margin: 0;
			padding: 0;
		}

		ul{
			list-style: none;
		}

		.con{
			border: 1px solid #000;
			overflow: hidden;
		}

		.con li{
			width: 23%;
			height: 200px;
			background-color: gold;
			float: left;
			margin: 30px 1%;
		}

		/*当屏幕尺寸小于800px，就会按下面方式进行布局*/
		@media (max-width: 800px){
			.con li{
				width: 46%;
				margin: 30px 2%;
			}
		}
	</style>
</head>
<body>
	<ul class="con">
		<li>1</li>
		<li>2</li>
		<li>3</li>
		<li>4</li>
	</ul>
</body>
</html>